<template>
 <div id="home">
   <nav-bar id="home-nav"><div slot="center">购物街</div></nav-bar>
   <home-swiper :banners="banners"/>
   <recommend-view :recommends="recommends"/>
 </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import HomeSwiper from "./childComps/HomeSwiper";
  import RecommendView from "./childComps/RecommendView";

  import {getHomeMassData} from 'network/home';


  export default {
    name: "Home",
    components:{
      NavBar,
      HomeSwiper,
      RecommendView
    },
    data() {
      return{
        banners: [],
        recommends: [],
      }
    },
    created() {
      //请求轮播图的多个数据
      getHomeMassData().then(res => {
        //console.log(res);
        //将res指向大对象的地址值，赋值给data中的banners和recommends
        //将获取到的数据放入data中
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
    }
  }
</script>

<style scoped>
  #home-nav{
    background-color: var(--color-tint);
    color: #f6f6f6;
  }
</style>
